<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Manager</title>
</head>
<body>

<form id="form">

    <p>员工姓名：
        <label>
            <input type="text" name="empName" th:value="${selectEmpName}"/>
        </label>
        部门：
        <select name="deptId">
            <option value="">请选择</option>
            <option th:each="dept : ${deptList}" th:selected="${selectDeptId} == ${dept.deptId}" th:text="${dept.deptName}" th:value="${dept.deptId}"></option>
        </select>
        <label>
            <input type="button" onclick="doSearch()" value="查询" />
            <input type="button" name="Submit25"  onclick="doBatchApprove()" value="批量审批通过" />
        </label>
        <input type="button" name="Submit24" onclick="doExport()"  value="导出文件1" />
        <input type="button" name="Submit24" onclick="doExport2()"  value="导出文件2" />

    </p>
    <table width="1086" height="118" border="1">
        <tr>
            <td width="29">&nbsp;</td>
            <td width="62"><div align="center"><span class="STYLE3">姓名</span></div></td>
            <td width="67"><div align="center"><span class="STYLE3">请假类型</span></div></td>
            <td width="106"><div align="center"><span class="STYLE3">开始时间</span></div></td>
            <td width="104"><div align="center"><span class="STYLE3">结束时间</span></div></td>
            <td width="137"><div align="center"><span class="STYLE3">备注</span></div></td>
            <td width="81"><div align="center"><span class="STYLE3">部门</span></div></td>
            <td width="123"><div align="center"><span class="STYLE3">照片</span></div></td>
            <td width="140"><div align="center"><span class="STYLE3">审批状态</span></div></td>
            <td width="173"><div align="center"><span class="STYLE3">操作</span></div></td>
        </tr>
        <tr th:each="vacation : ${vacationVoList}" >
            <td><label>
                <input type="checkbox" name="vacationIds" th:value="${vacation.vacationId}" />
            </label></td>
            <td th:text="${vacation.empName}">张三</td>
            <td th:text="${vacation.vacationType}">病假</td>
            <td th:text="${#dates.format(vacation.vacationStartTime, 'yyyy-MM-dd')}">2021-11-12</td>
            <td th:text="${#dates.format(vacation.vacationEndTime, 'yyyy-MM-dd')}">2021-11-12</td>
            <td th:text="${vacation.remark}">住院</td>
            <td th:text="${vacation.deptName}">开发部</td>
            <td><img width="80px" height="80px" th:src="@{http://localhost/img/{a}(a=${vacation.pictureUrl})}"></td>
            <td th:text="${vacation.statusName}"></td>
            <td><label>
                <input type="button" name="Submit3" th:onclick="doApprove([[${vacation.vacationId}]])"    value="通过" />
                <input type="button" name="Submit32"  th:onclick="doReject([[${vacation.vacationId}]])"   value="不通过" />
            </label></td>
        </tr>

    </table>
    <p>
        <a  th:href="@{/vacation/search(pageNum=1,pageSize=${pageInfo.pageSize},deptId=${selectDeptId},empName=${selectEmpName})}" >首页</a>
        <a  th:href="@{/vacation/search(pageNum=${pageInfo.prePage},pageSize=${pageInfo.pageSize},deptId=${selectDeptId},empName=${selectEmpName})}" >上一页</a>
        <a  th:href="@{/vacation/search(pageNum=${pageInfo.nextPage},pageSize=${pageInfo.pageSize},deptId=${selectDeptId},empName=${selectEmpName})}" >下一页</a>
        <a  th:href="@{/vacation/search(pageNum=${pageInfo.pages},pageSize=${pageInfo.pageSize},deptId=${selectDeptId},empName=${selectEmpName})}">末页</a>
        总计<span th:text="${pageInfo.total}"></span>条 当前第<span th:text="${pageInfo.pageNum}"></span>页
        <input type="button" name="Submit22" onclick="checkAll()" value="全选" />
        <input type="button" name="Submit23" onclick="reverse()" value="反选" />
    </p>
</form>
批量导入：
<form id="form2" method="post" action="/vacation/upload" enctype="multipart/form-data">
    <input type="file" name="file" onchange="uploadFile()" value="批量导入请假单" />
</form>
</body>
<script>
    function doSearch(){
        var formObj = document.getElementById("form");
        formObj.method="get";
        formObj.action="/vacation/search";
        formObj.submit();
    }
    function doExport(){
        var formObj = document.getElementById("form");
        formObj.method="get";
        formObj.action="/vacation/export";
        formObj.submit();
    }
    function doExport2(){
        var formObj = document.getElementById("form");
        formObj.method="get";
        formObj.action="/vacation/export2";
        formObj.submit();
    }
    function doBatchApprove(){
        var checkboxList= document.getElementsByName("vacationIds")
        var result=false;
        for(i=0;i<checkboxList.length;i++){
            //循环判断所有的checkbox的列表，如有有任何一个被选中，则result设置为true，循环结束
            result=checkboxList[i].checked;
            if(result){
                break;
            }
        }

        if(!result){
            alert('请至少选择一条记录');
            return;
        }
        var formObj = document.getElementById("form");
        formObj.method="post";
        formObj.action="/vacation/batchapprove";
        formObj.submit();
    }



    //单条审批通过
    function doApprove(id){

        var formObj = document.getElementById("form");
        formObj.method="post";
        formObj.action="/vacation/approve?vacationId="+id;
        formObj.submit();
    }

    //单条审批不通过
    function doReject(id){

        var formObj = document.getElementById("form");
        formObj.method="post";
        formObj.action="/vacation/reject?vacationId="+id;
        formObj.submit();
    }

    //全选
    function checkAll(){
        var checkboxList= document.getElementsByName("vacationIds");
        for(i=0;i<checkboxList.length;i++){
            checkboxList[i].checked = true
        }
    }

    //反选
    function reverse(){
        var checkboxList= document.getElementsByName("vacationIds");
        for(i=0;i<checkboxList.length;i++){
            checkboxList[i].checked = !checkboxList[i].checked
        }
    }

    //批量导入记录
    function uploadFile(){
        var form2Obj = document.getElementById("form2");
        form2Obj.submit();
    }

</script>
</html>